<template>
  <el-form :model="form" label-width="auto">
    <!-- 循环渲染所有行 -->
    <el-row
      :gutter="12"
      v-for="(row, rowIndex) in formRows"
      :key="rowIndex"
      :class="rowIndex % 2 === 0 ? 'odd-row' : 'even-row'"
    >
      <!-- 循环渲染行内的每个字段 -->
      <el-col :span="col.span" v-for="(col, colIndex) in row" :key="colIndex">
        <el-form-item :label="col.label" v-show="isFieldVisible(col, col.dependsOn)">
          <!-- 根据字段类型渲染不同组件 -->
          <component
            :is="vNodeComponent(col)"
            v-model="form[col.field as keyof typeof form]"
            :placeholder="col.placeholder || `请输入${col.label}`"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import { formRows } from '../_assets/baseRowData'
import { renderSlots } from './ComponentItem'
import { FormItem, Form } from '../_assets/types'
// 表单数据
const form = ref<Form>({
  name: '',
  gender: '',
  birthDate: '',
  age: '',
  nationality: '',
  ethnicity: '',
  birthWeight: '',
  admissionWeight: '',
  birthPlace: '',
  nativePlace: '',
  idCard: '',
  occupation: '',
  maritalStatus: '',
  marital: ''
})

const inspectionRules = (conditions: any) => {
  return conditions.every((condition: any) => {
    if (condition?.callback) return condition.callback(form.value)

    const value = form.value[condition.field as keyof Form]
    switch (condition.operator) {
      case '>':
        return value > condition.value
      case '===':
        return value === condition.value
      case '!=':
        return value !== condition.value
      default:
        return true
    }
  })
}

// 动态计算字段的显示状态
const isFieldVisible = (col: FormItem, dependsOn?: Array<keyof Form>) => {
  if (!dependsOn) return true
  if (typeof col.visible === 'boolean') return col.visible
  if (typeof col.visible === 'boolean') return col.visible

  const { conditions, logic } = col.visible

  if (logic === 'AND') {
    return inspectionRules(conditions)
  }
  if (logic === 'OR') {
    return inspectionRules(conditions)
  }
  return true
}
// 定义事件处理函数的类型
// eslint-disable-next-line no-unused-vars
type EventHandler = (...args: any[]) => void
// 定义转换后的事件对象类型
type TransformedEvents = Record<string, EventHandler>
const getFieldEvents = (col: FormItem) => {
  // 初始化事件对象，如果col没有events则使用空对象
  const events = { ...(col.events || {}) }
  // 指定 transformedEvents 的类型为 TransformedEvents
  const transformedEvents: TransformedEvents = {}

  // 遍历所有事件，统一转换为Vue事件绑定格式
  Object.keys(events).forEach((eventName) => {
    // 确保事件是一个函数
    if (typeof events[eventName] === 'function') {
      // 将事件名转换为驼峰式并添加on前缀
      const vueEventName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`
      transformedEvents[vueEventName] = events[eventName]
    }
  })

  return transformedEvents
}

const vNodeComponent = (col: FormItem) => {
  const events = getFieldEvents(col)
  const customSlot = col.type ? renderSlots(col.type, col.props?.options) : col?.slots
  return h(col.component, { ...col.props, ...events }, customSlot)
}
</script>
<style scoped lang="scss">
.odd-row {
  padding-top: 4px;
}

.even-row {
  padding-top: 4px;
}
</style>
